<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside class="home-aside" width="250px">
      <!-- logo -->
      <div class="home-logo-div">
        <router-link to="/customer/home">
          <el-image
            class="home-logo"
            src="../src/assets/logo_trans.png"
            fit="contain"
          ></el-image
        ></router-link>
      </div>
      <!-- 折叠icon -->
      <el-icon
        class="toggle-button"
        v-model="isCollapse"
        @click="toggleCollapse"
        size="20px"
      >
        <Fold v-if="!isCollapse" />
        <Expand v-if="isCollapse" />
      </el-icon>
      <!-- 侧边栏菜单 -->
      <el-menu
        class="home-menu-vertical"
        :collapse="isCollapse"
        :default-active="$route.path"
        router
        active-text-color="#E3A566"
      >
        <el-menu-item index="/customer/food">
          <el-icon>
            <Search />
          </el-icon>
          <span slot="title">菜品列表</span>
        </el-menu-item>
        <el-menu-item index="/customer/recommend">
          <el-icon>
            <MagicStick />
          </el-icon>
          <span slot="title">猜你想吃</span>
        </el-menu-item>
        <el-menu-item index="/customer/order">
          <el-icon>
            <Wallet />
          </el-icon>
          <span slot="title">我的订单</span>
        </el-menu-item>
        <el-menu-item index="/customer/account">
          <el-icon>
            <User />
          </el-icon>
          <span slot="title">我的账号</span>
        </el-menu-item>
      </el-menu>
      <el-image src="../src/assets/plate.png" class="plate-div"></el-image>
    </el-aside>

    <el-container>
      <!-- 头部 -->
      <el-header class="food-header" height="40px">
        <div class="ball"></div>
        <div class="food-line"></div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/customer/home' }"> 主页 </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/customer/food' }"
            >菜品列表</el-breadcrumb-item
          >
          <el-breadcrumb-item>菜品识别</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>

      <!-- 主体 -->
      <el-main class="food-c-main">
        <el-scrollbar height="590px">
          <el-card class="recognize-card">
            <el-button class="recognize-return" type="warning" text @click="gotoFood"
              ><el-icon size="30px"><Back /></el-icon>
            </el-button>
            <span>上传菜品照片&nbsp&nbsp&nbsp&nbsp一键识别信息</span>
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8080/photo/upload/food"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="photoURL" :src="photoURL" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <el-button class="recognize-button" round color="#E3A566" @click="recognize"
              >一键识别</el-button
            ></el-card
          >
          <!-- 识别结果的分割线 -->
          <el-divider content-position="center" v-if="isRecognized">识别结果</el-divider>
          <!-- 识别结果的卡片 -->
          <el-card class="recognize-card" v-if="isRecognized">
            <div style="font-size: 20px">我们为您找到最匹配的菜品</div>
            <el-row :gutter="30">
              <el-col :span="6" :offset="2">
                <!-- 左侧图像 -->
                <el-image
                  :src="recognizeResult[0].photo"
                  fit="cover"
                  class="recognize-image"
                >
                </el-image>
              </el-col>
              <el-col :span="12">
                <!-- 右侧信息 -->
                <div class="fooddetail-title">{{ recognizeResult[0].foodName }}</div>
                <el-divider content-position="left">基本信息</el-divider>
                <el-descriptions :column="2" class="fooddetail-des">
                  <el-descriptions-item label="价格"
                    >￥ {{ recognizeResult[0].price }}</el-descriptions-item
                  >
                  <el-descriptions-item label="类别">
                    <el-tag>{{ recognizeResult[0].label }}</el-tag></el-descriptions-item
                  >
                  <el-descriptions-item label="评分">
                    <el-rate
                      v-model="recognizeResult[0].foodScore"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value} 分"
                  /></el-descriptions-item>
                  <el-descriptions-item label="销量">
                    {{ recognizeResult[0].saleNumber }}
                  </el-descriptions-item>
                </el-descriptions>
                <el-divider content-position="left">口味指数</el-divider>
                <el-descriptions :column="2" class="fooddetail-des">
                  <el-descriptions-item label="辣">
                    <el-rate
                      v-model="recognizeResult[0].foodFlavor.spicy"
                      :colors="['#409eff', '#67c23a', '#FF9900']"
                      disabled
                  /></el-descriptions-item>
                  <el-descriptions-item label="甜">
                    <el-rate
                      v-model="recognizeResult[0].foodFlavor.sweet"
                      :colors="['#409eff', '#67c23a', '#FF9900']"
                      disabled
                  /></el-descriptions-item>
                  <el-descriptions-item label="咸">
                    <el-rate
                      v-model="recognizeResult[0].foodFlavor.salted"
                      :colors="['#409eff', '#67c23a', '#FF9900']"
                      disabled /></el-descriptions-item
                  ><el-descriptions-item label="酸">
                    <el-rate
                      v-model="recognizeResult[0].foodFlavor.acid"
                      :colors="['#409eff', '#67c23a', '#FF9900']"
                      disabled /></el-descriptions-item
                  ><el-descriptions-item label="重口">
                    <el-rate
                      v-model="recognizeResult[0].foodFlavor.heavyTaste"
                      :colors="['#409eff', '#67c23a', '#FF9900']"
                      disabled /></el-descriptions-item
                  ><el-descriptions-item label="热">
                    <el-rate
                      v-model="recognizeResult[0].foodFlavor.hotLevel"
                      :colors="['#409eff', '#67c23a', '#FF9900']"
                      disabled
                  /></el-descriptions-item>
                </el-descriptions>
                <el-divider content-position="left">智能识别</el-divider>
                <el-descriptions
                  ><el-descriptions-item label="卡路里">
                    {{ recognizeResult[0].calorie }} 大卡/100g
                    <svg
                      t="1701862753289"
                      class="icon"
                      viewBox="0 0 1163 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="4888"
                      width="20"
                      height="20"
                    >
                      <path
                        d="M677.688726 831.761212h-16.057871a90.761883 90.761883 0 0 1-23.272278-2.094505 20.014159 20.014159 0 0 0-8.145297 15.12698c0 11.868862 14.428812 17.919654 36.07203 17.919654s37.002922-8.145297 37.002922-18.850545-9.774357-12.101584-25.599506-12.101584zM661.165409 738.904824c12.56703 0 21.410495-8.843466 21.410496-26.530397s-9.076188-26.297674-21.410496-26.297673-21.410495 9.076188-21.410495 26.297673 9.308911 26.530397 21.410495 26.530397z"
                        fill="#E3A566"
                        p-id="4889"
                      ></path>
                      <path
                        d="M957.188782 0.010007H206.425103A134.979211 134.979211 0 0 0 69.816833 133.592881v756.814471A134.979211 134.979211 0 0 0 206.425103 1023.990226h750.763679A135.211933 135.211933 0 0 0 1093.797052 890.407352V133.592881A135.211933 135.211933 0 0 0 957.188782 0.010007zM519.204515 824.546806l-36.770198-64.464209-20.246882 23.272277v41.424655h-51.897179V585.773237h51.664456v133.350151h1.163614l51.664457-64.464209h57.715248l-60.042476 69.816833 64.231486 99.838071z m138.004607 71.445892c-39.097427 0-71.445893-12.334307-71.445892-42.820991a37.70109 37.70109 0 0 1 23.272277-33.51208v-1.396336a33.046634 33.046634 0 0 1-15.592426-29.32307 40.959209 40.959209 0 0 1 18.850545-31.650298v-1.163614a54.45713 54.45713 0 0 1-23.272278-43.984604c0-41.424654 34.442971-61.904259 71.21317-61.904259a83.314754 83.314754 0 0 1 26.995842 4.18901h62.369705v38.631981h-25.366783a44.45005 44.45005 0 0 1 4.887178 20.712327c0 39.795595-30.253961 57.01708-67.722328 57.01708a75.867625 75.867625 0 0 1-20.014159-3.025396 13.730644 13.730644 0 0 0-5.352624 11.868862c0 7.679852 6.981683 11.403416 25.13406 11.403416h26.995842c41.8901 0 65.3951 12.799753 65.395101 43.519159-0.232723 36.07203-37.235644 61.438813-96.579953 61.438813zM767.985164 471.971799a251.107876 251.107876 0 0 0-190.832677-88.201933c-7.214406 0-14.428812 0-21.410496 1.163614l-106.354309-162.905944-20.712327 10.00708 69.816833 162.905944a253.90055 253.90055 0 0 0-107.750646 69.816833l-184.316439-173.378469a501.052139 501.052139 0 0 1 750.763679 11.170693z"
                        fill="#E3A566"
                        p-id="4890"
                      ></path>
                    </svg> </el-descriptions-item
                ></el-descriptions>
              </el-col>
              <el-col :span="2"
                ><el-button
                  style="color: #e3a566"
                  text
                  @click="gotoFoodDetail(recognizeResult[0].id)"
                  >查看详情<el-icon><DArrowRight /></el-icon></el-button
              ></el-col>
            </el-row>
            <!-- 其它匹配结果 -->
            <el-divider>您可能还想了解以下菜品</el-divider>
            <el-row>
              <el-col
                v-for="foodEntity in recognizeResultLeft"
                :key="foodEntity.id"
                :span="6"
                :offset="1"
                class="recommend-col"
              >
                <!-- 每个食物卡片 -->
                <el-card :body-style="{ padding: '0px' }" class="recommend-card">
                  <el-image
                    class="food-image"
                    :src="foodEntity.photo"
                    fit="cover"
                    @click.native="gotoFoodDetail(foodEntity.id)"
                  >
                  </el-image>
                  <div style="padding: 0px 14px 10px; text-align: left">
                    <span style="font-size: 20px">{{ foodEntity.foodName }}</span
                    ><br />
                    <span>￥ {{ foodEntity.price }}</span>
                    <span>&nbsp&nbsp&nbsp&nbsp&nbsp</span>
                    <span
                      ><svg
                        t="1700284969270"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="4261"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M336 972.8c-60.8-128-28.8-201.6 19.2-268.8 51.2-76.8 64-150.4 64-150.4s41.6 51.2 25.6 134.4c70.4-80 83.2-208 73.6-256 160 112 230.4 358.4 137.6 537.6 492.8-281.6 121.6-700.8 57.6-745.6 22.4 48 25.6 128-19.2 166.4-73.6-281.6-256-336-256-336 22.4 144-76.8 300.8-172.8 419.2-3.2-57.6-6.4-96-38.4-153.6-6.4 105.6-86.4 188.8-108.8 294.4C89.6 758.4 140.8 860.8 336 972.8L336 972.8z"
                          p-id="4262"
                          fill="#d81e06"
                        ></path>
                      </svg>
                      {{ foodEntity.saleNumber }}</span
                    >
                    <span
                      ><el-rate
                        v-model="foodEntity.foodScore"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value} 分"
                    /></span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-scrollbar>
      </el-main>
      <!-- 回到顶部 -->
      <el-backtop :right="80" :bottom="100" />
    </el-container>
  </el-container>
</template>

<script>
import { mapState } from "vuex";
import { ElMessageBox, ElMessage } from "element-plus";
export default {
  data() {
    return {
      isCollapse: false, //是否折叠侧边栏
      isRecognized: false,
      photoURL: "",
      recognizeResult: [],
      recognizeResultLeft: [],
    };
  },
  computed: {
    ...mapState({
      foodInCart: (state) => state.foodInCart, // 注意路径是否正确
    }),
  },
  created() {
    let _this = this;
  },
  methods: {
    // 切换侧边栏的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    gotoFood() {
      let _this = this;
      _this.$router.push({
        path: "/customer/food",
      });
      let data = { name: "汉堡", calorie: "256", label: "小吃" };
      console.log(JSON.stringify(data));
    },
    recognize() {
      let _this = this;
      if (_this.photoURL === "") {
        _this.$message({
          message: "请先上传照片！",
          type: "warning",
        });
        return;
      }

      let loading = this.$loading({
        text: "Loading", // 显示文本
        spinner: "el-icon-loading", // 显示的 icon
        spinnerColor: "#E3A566",
        textColor: "#E3A566",
        // background: "rgba(0, 0, 0, 0.2)", // loading 遮罩层颜色
        target: document.querySelector(".recognize-card"), // 挂载的 DOM 元素
      });

      let tmpphoto = _this.photoURL.replace("http://localhost:8080/photo/food/", "");
      let url = "/foods/foodRecognize/" + tmpphoto;
      _this.$http.get(url).then(function (response) {
        _this.isRecognized = true;
        console.log("识别的结果是", response.data);
        if (response.data !== null) {
          _this.recognizeResult = response.data;
        }
        for (let i = 0; i < _this.recognizeResult.length; i++) {
          _this.recognizeResult[i].photo =
            "http://localhost:8080" + _this.recognizeResult[i].photo;
          // 去除_this.recognizeResult[i].foodFlavor中的foodId
          delete _this.recognizeResult[i].foodFlavor[
            Object.keys(_this.recognizeResult[i].foodFlavor)[0]
          ];
        }
        _this.recognizeResultLeft = _this.recognizeResult.slice(1);
        console.log("_this.recognizeResultLeft", _this.recognizeResultLeft);
        loading.close();
      });
    },
    handleAvatarSuccess(response, uploadFile) {
      //显示上传的照片
      this.photoURL = "http://localhost:8080" + response;
    },
    // 查看菜品详情
    gotoFoodDetail(id) {
      this.$router.push({
        path: "/customer/fooddetail",
        state: {
          foodID: id,
          lastpage: "/customer/recognize",
        },
      });
    },
  },
};
</script>

<style>
.recognize-card {
  position: relative;
  border-radius: 20px !important;
  margin: 0 auto;
  line-height: 50px;
  padding: 0 50px;
}
.recognize-button {
  color: white !important;
  font-size: 18px !important;
  font-family: sanji;
}
.recognize-button:focus {
  color: white !important;
  background-color: #e3a566 !important;
}
.recognize-return {
  position: absolute;
  left: 0;
  top: 0;
}
.recognize-image {
  margin-top: 30px;
  width: 200px;
  height: 180px;
  box-shadow: 3px 3px 5px 5px rgba(0, 0, 0, 0.3);
}
</style>
